<template>
  <div>
    <span
      class="tips"
      v-if="showArr.length > 0"
    >{{showArr[nowIndex] ? showArr[nowIndex].userName : ''}}支付&yen;{{showArr[nowIndex] ? showArr[nowIndex].cost : ''}}</span>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <div class="ad-wrap">
      <img src="@/assets/images/homeImg1@2x.png" alt @click="toPage('inviteFriend')" />
    </div>
    <div class="project-wrap">
      <piece
        v-for="item in products"
        :key="item.id"
        @click.native="toDetail(item.id)"
        :product="item"
      />
    </div>
  </div>
</template>
<script>
import { productsIndex } from "@/api/products.js";
import { getBanner, buyRecs } from "@/api/mine.js";
export default {
  data() {
    return {
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ],
      products: [],
      showArr: [],
      nowIndex: 0
    };
  },
  methods: {
    toPage(pageName) {
      if (pageName == null) return;
      this.$router.push({ name: pageName });
    },
    toDetail(id) {
      this.$router.push({ path: "/projectDetail", query: { id: id } });
    },
    showPlayer() {
      let that = this;
      setTimeout(() => {
        if (that.nowIndex == that.showArr.length) {
          that.nowIndex = 0;
        } else {
          that.nowIndex = that.nowIndex + 1;
        }
        that.showPlayer();
      }, 2000);
    }
  },
  mounted() {
    buyRecs().then(res => {
      let showArr = [];
      res.map(e => {
        showArr.push({ userName: e.user.nickname, cost: e.actual_amt });
      });
      this.showArr = showArr;
      this.showPlayer();
    });
    productsIndex().then(res => {
      // eslint-disable-next-line
      console.log(res);
      this.products = res;
    });
    getBanner().then(res => {
      // eslint-disable-next-line
      console.log(res);
      let images = [];
      res.map(e => {
        images.push(e.img_url);
      });
      this.images = images;
    });
  },
  components: {
    piece: () => import("./piece")
  }
};
</script>
<style lang="less" scoped>
.ad-wrap {
  text-align: center;
  padding: 10px 20px;
  img {
    width: 100%;
  }
}
.project-wrap {
  margin: 0 10px;
}
.tips {
  position: fixed;
  top: 6%;
  left: 0;
  z-index: 3;
  background: rgba(white, 0.3);
  color: white;
  height: 23px;
  line-height: 23px;
  padding: 0 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 12px;
}
</style>